<template>
	<view class="content">
		<view class="ani-box">
			<view class="left">
				<view class="left-top">
					<view style="font-weight: bold;font-size: 20px;">{{leftTimes}}</view>
					<view>左手想象次数</view>
				</view>
				<view class="left-center">
					<view class="leftHands">
						{{hand}}
					</view>
					<view class="time">
						<view class="timeNum">{{ Math.floor(showTime / 10) }}</view>
						<view class="timeNum">{{showTime % 10}}</view>
						<!-- <view class="timeText">秒</view> -->
					</view>
				</view>
				<view class="left-bottom">
					<view>患者姓名：{{name}}</view>
					<view>训练时长：15分钟</view>
				</view>
			</view>
			<view class="center">
				<view class="center-bg">
					<image class="img" src="../../../static/icon/training/bgImg.png" mode=""></image>
				</view>
				<view class="center-btn">
					停止训练
				</view>
				<!-- 气球 -->
				<view class="ball" v-if="boolB==false" :style="{top:ballTop+'%'}" v-cloak>

					<image class="ball-img" src="../../../static/icon/training/ball.png"
						:style="{width: ballW+'px',height: ballH+'px'}"></image>
				</view>
				<view class="ball" v-else>
					<image src="../../../static/icon/training/bang.png" :style="{width: bangW+'px',height: bangH+'px'}">
					</image>
				</view>
				<view class="hand-box">
					<!-- <button @click="test(1)">test</button> -->
					<view class="hand ">
						<!-- 左 -->
						<view v-if="handFlag!= '01' ">
							<image v-if="leftHandImg" src="../../../static/icon/training/leftZHand.png"
								:style="{width: LhandW+'px',height: LhandH+'px'}"></image>
							<image v-else src="../../../static/icon/training/leftZHand.png"
								:style="{width: LhandW+'px',height: LhandH+'px',opacity:0}"></image>
						</view>
						<view v-else>
							<image class="ball-img shanFlageLeft" src="../../../static/icon/training/leftWHand.png"
								:style="{width: LhandW+'px',height: LhandH+'px'}" ></image>
						</view>
						<view class="hand-center">
							<view class="handText" v-if="BDtrainingFlag!=0">
								<!-- <text class="handText-red" style="color: #f40;fontSize:40rpx ;">{{hand}}-- {{showTime}}</text> -->
								<text>第{{xiaojie}}/10小节</text>
							</view>

							<view v-if="boolTrain==true" class="times">{{minutes}} 分 {{second}}秒</view>
						</view>
						<!-- 右  -->
						<view v-if="handFlag!='02'">
							<image v-if="rightHandImg==true" src="../../../static/icon/training/rightZHand.png"
								:style="{width: RhandW+'px',height: RhandH+'px'}"></image>
							<image v-else src="../../../static/icon/training/rightZHand.png"
								:style="{width: RhandW+'px',height: RhandH+'px',opacity:0}"></image>
						</view>
						<view v-else>
							<image  class="ball-img shanFlageRight" src="../../../static/icon/training/rightWHand.png"
								:style="{width: RhandW+'px',height: RhandH+'px'}" ></image>
						</view>
					</view>
				</view>
			</view>
			<view class="right">
				<view class="right-top">
					<view style="font-weight: bold;font-size: 20px;">{{rightTimes}}</view>
					<view>右手想象次数</view>
				</view>
				<view class="right-bottom">
					<!-- <view class="zero" @click="resetData">数据清零</view>
					<view class="assess">康复评估</view> -->
					<view class="begin" v-if="boolTrain==false && BDtrainingFlag==0" @click="train(1)">
						开始训练(主动)
					</view>
					<!-- 引导训练按钮区域 -->
					<view :class="BDbuttonCountClass" v-if="boolTrain==false" @click="train(2)"
						style="margin-top: 40rpx;">
						{{BDbuttonCount}}
					</view>

					<!-- 引导训练按钮区域 -->
					<view class="correct" v-if="boolTrain==true">
						<view>{{percent}}%</view>
						<view>正确率</view>
					</view>
					<view class="end" v-if="boolTrain==true" @click="train(0)">
						结束训练
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
    import eventbus from '../../../eventBus/eventbus.js'
	export default {
		data() {
			return {
                index:0,
				ballW: 50,
				ballH: 80,
				ballTop: 31,

				bangW: 200,
				bangH: 200,

				LhandW: 110,
				LhandH: 160,
				RhandW: 110,
				RhandH: 160,


				boolTrain: false,

				LboolZ: true,
				RboolZ: true,
				boolB: false,

				leftTimes: 0,
				rightTimes: 0,
				minutes: 0,
				second: 0,
				count: 0,
				Tid: 0,
				timer: 0,

				percent: 70,

				name: "",
				timer1: null,
				timer2: null,
				leftHandImg: true,
				rightHandImg: true,
				ballImg: true,

				serviceId: '0000ffe0-0000-1000-8000-00805f9b34fb',
				characteristicId: '0000ffe1-0000-1000-8000-00805f9b34fb',

				showData: null,
				handFlag: null,
				handsMovieTimer: null,
				number: 0,
				postFlag: false,
				timePlus: 0,
				showTime: 0,
				moveTimer: null,
				hand: '',
				xiaojie: 1,
				BDtrainingFlag: 0,
				blueToothData: [],
				blueChangeNum: 0,
				timerNum: 0,
				shanFlageLeft: true,
				shanFlageRight: true,
				innerAudioContext: null,
				twinkleTimer: null
			}
		},
		onLoad() {
			// #ifdef APP-PLUS
			uni.showLoading({
				title: "加载中..."
			})

			plus.screen.unlockOrientation();
			plus.screen.lockOrientation('landscape-primary');
			uni.hideLoading();

			// #endif
			// plus.screen.lockOrientation("landscape-primary");
			this.setName();

		},
		onUnload() {
			plus.screen.lockOrientation('portrait-primary');
			uni.redirectTo({
				url: '../empty/empty/'
			})

			return true
		},
		mounted() {
			// 测试专用
			// setInterval(() => {
			// 	this.blueTooth()
			// }, 50)
			// setInterval(() => {
			// 	this.shanFlage == 1 ? this.shanFlage = 0 : this.shanFlage = 1
			// }, 1000)
			//测试 end

			this.innerAudioContext = uni.createInnerAudioContext();

		},
		computed: {
			...mapState(['blueToothDataGlobal', 'status', 'num']),
			BDbuttonCount() {
				if (this.BDtrainingFlag == 0) {
					return '开始训练(引导)'
				} else if (this.BDtrainingFlag == 1) {
					return '引导训练中'
				} else if (this.BDtrainingFlag == 2) {
					return '引导训练结束'
				}
			},
			BDbuttonCountClass() {
				if (this.BDtrainingFlag == 0) {
					return 'begin'
				} else if (this.BDtrainingFlag == 1) {
					return 'BD_trainning'
				} else if (this.BDtrainingFlag == 2) {
					return 'BD_end'
				}
			},


		},
		watch: {
			//0.5s
			num: {
				handler() {
					this.flowNum()
				},
				immediate: true
			},
			status: {
				handler(newval, oldval) {
					switch (newval) {
						case 'left':
							// this.twinkleLeft()
							this.innerAudioContext.src =
								'http://cdn.brainseek.cn/imager_left.mp3';
							this.innerAudioContext.onPlay();
							break;
						case 'right':
							// this.twinkleRight()
							this.innerAudioContext.src =
								'http://cdn.brainseek.cn/imager_right.mp3';
							this.innerAudioContext.onPlay();
							break;
						case 'rest':
							if (this.twinkleTimer != null) {
								clearInterval(this.twinkleTimer)
							}
							this.shanFlageLeft = true 
							this.shanFlageRight = true
							break;
						case 'none':
							if (this.twinkleTimer != null) {
								clearInterval(this.twinkleTimer)
							}
							break;
						default:
							break;
					}
				},
				immediate: true
			}
		},
		methods: {
            changeIndex() {
              this.index = 0  
            },
			twinkleLeft() {
				if (this.twinkleTimer != null) {
					clearInterval(this.twinkleTimer)
				}
				this.twinkleTimer = setInterval(() => {
					this.shanFlageLeft ? (this.shanFlageLeft = false) : (this.shanFlageLeft = true)
				}, 125)
			},
			twinkleRight() {
				if (this.twinkleTimer != null) {
					clearInterval(this.twinkleTimer)
				}
				this.twinkleTimer = setInterval(() => {
					this.shanFlageRight  ? (this.shanFlageRight = false) : (this.shanFlageRight = true)
				}, 125)
			},
			...mapMutations(['SPLICE_BLUETOOTHDATAGLOBAL', 'SET_STATUS', 'SET_NUM']),
			flowNum() {
				if (this.BDtrainingFlag != 1) return
			    eventbus.$on('resetTime', e => {
			        this.timerNum = 0
			        //console.log('计时修正')
			        return 
			    })
				this.timerNum++
				if (this.timerNum < 5) {  
					this.showTime = 5 - this.timerNum
					this.hand = '左手'
					this.handFlag = '01'
					if (this.timerNum == 5) {
						this.movieBD() 
					}
				} else if (this.timerNum >= 5 && this.timerNum < 10) {
			        this.hand = '休息'
			        this.handFlag = null
					this.showTime = 10 - this.timerNum
					
				}  else if (this.timerNum >= 10 && this.timerNum < 14) {
					this.hand = '右手'
					this.handFlag = '02'
					this.showTime = 14 - this.timerNum
					if (this.timerNum == 14) {
						this.movieBD() //
					}
				}  else if (this.timerNum >= 14 && this.timerNum < 18) {
					this.hand = '休息'
			        this.handFlag = null 
					this.showTime = 21 - this.timerNum
				}  else if (this.timerNum >= 18 && this.timerNum < 20) {
					this.hand = '休息'
			        this.handFlag = null
					this.showTime = 21- this.timerNum
				} else if (this.timerNum >= 20) {
					this.showTime = 1
			        this.timerNum = 0
					this.xiaojie++
			        console.log("下一小节")
					if (this.xiaojie > 10) {       //总共循环次数设定，与blue-tooth中 if(this.total_index >= N)的N一致 
			            console.log(this.xiaojie)
						this.BDtrainingFlag = 2
			            //eventbus.$emit('stop', this.BDtrainingFlag)
						
						// #ifdef APP-PLUS
						plus.nativeUI.alert('本次训练结束，是否返回？')
						// #endif
						this.BDtrainingFlag = 0
						this.xiaojie = 1
					}
				}
			},

			train(index) {
				if (index == 1) {
					// this.boolTrain = true;
					// this.readData()
					// uni.setStorageSync("sendBlue", true);
					// let sequenceId = this.genID(20);
					// uni.setStorageSync("sequenceId", sequenceId);
					// this.postFlag = true
				} else if (index == 0) {
					this.postFlag = false
					this.boolTrain = false;
					this.boolB = false;

					uni.setStorageSync("sendBlue", false);

					this.SET_STATUS('')
					uni.redirectTo({
						url: '../trainScore/trainScore'
					})
				} else if (index == 2) {
                     eventbus.$emit('begin', this.BDtrainingFlag)
					if (this.BDtrainingFlag == 1 || this.BDtrainingFlag == 2) {
						if (this.BDtrainingFlag == 1) {
							console.log('训练中')
							uni.showToast({
								title: '训练中...'
							})
						} else {
							console.log('训练结束')

						}
						return
					}
					//逻辑区
					this.BDtrainingFlag = 1
					// this.flowTimer()
				}
			},

			blueTooth() {
				let handestatus = this.$store.state.status
				if (handestatus === 'none' || handestatus === '') {
					this.blueChangeNum++
					// console.log(this.blueChangeNum)

					if (this.blueChangeNum % 25 === 0) {
						this.SET_NUM()
					}
					if (handestatus === 'none') {
						if (this.blueToothData.length != 0) {
							this.blueToothData = []
						}
					}
					return
				} else {

					this.blueChangeNum++
					if (this.blueChangeNum % 25 === 0) {
						//每秒250次 20s为5000次
						this.SET_NUM()
					}
					// var time = Date.now();
					// let pushData = {};
					// pushData.time = time;
					// pushData.data = 'the infomation from huaxun-test';
					//数组存入数据
					// this.blueToothData.push(pushData);
					//如果type不同则清空this.blueToothData
					// if (this.blueToothData.length >= 25) {
					// 	var _that = this;
					// 	// this.blueToothData.splice(0, 25)
					// 	// console.log('————————后端传值————————')
					// 	uni.request({
					// 		url: _that.serverUrl + "/submit/toothData",
					// 		data: {
					// 			"data": _that.blueToothData.splice(0, 25),
					// 			"jobName": _that.number,
					// 			"openid": _that.openid,
					// 			"sequenceId": _that.sequenceId,
					// 			"type": handestatus
					// 		},
					// 		header: {
					// 			"usertoken": _that.token
					// 		},
					// 		method: "POST",
					// 		success(res) {
					// 			if (res.data.status == 200) {
					// 				_that.number++;

					// 				console.log('数据发送成功')
					// 			}
					// 		},
					// 		fail: () => {
					// 			uni.showToast({
					// 				duration: 800,
					// 				title: "提交数据失败"
					// 			})
					// 		}
					// 	})
					// }
				}
			},

			//订阅低功耗蓝牙监听值变化
			notifyValueChange() {
				if (this.$store.state.blueToothDeviceId === '') {
					uni.showToast({
						title: '获取设备id失败',
						icon: 'error'
					})
					return
				}
				uni.notifyBLECharacteristicValueChange({
					state: true, // 启用 notify 功能
					// 这里的 deviceId 需要已经通过 createBLEConnection 与对应设备建立链接
					deviceId: this.$store.state.blueToothDeviceId, //store
					// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
					serviceId: '0000ffe0-0000-1000-8000-00805f9b34fb', //store 直接提供
					// 这里的 characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取
					characteristicId: '0000ffe1-0000-1000-8000-00805f9b34fb', //可获取也可提供
					success: (res) => {

						plus.nativeUI.alert('训练设备已成功连接')

						//启动监听特征值变化
						uni.onBLECharacteristicValueChange(characteristic => {
							// plus.nativeUI.toast('蓝牙特征码改变：' + this.ab2hex(characteristic.value))
							// console.log(characteristic)
							this.handFlag = this.ab2hex(characteristic.value)

							this.handsStatusReset()
						})
					},
					fail: (err) => {
						plus.nativeUI.alert(err)
					}
				})
			},
			BDBLECharacteristicValueChange() {
				//监听唯一连接的蓝牙设备并禁停
				uni.onBLECharacteristicValueChange(characteristic => {
					console.log('训练页的蓝牙特征值更新')
				})
			},
			//手部复原 
			handsStatusReset() {
				if (this.handsMovieTimer != null) {
					clearTimeout(this.handsMovieTimer)
				}
				this.handsMovieTimer = setTimeout(() => {
					this.handFlag = null
				}, 3000)
				this.movie() //气球动画
			},
			//读取蓝牙特征值
			readData() {

				this.notifyValueChange()
				//读取蓝牙 (该服务只订阅不需读取)
				// uni.readBLECharacteristicValue({
				// 	deviceId: this.$store.state.blueToothDeviceId, //store
				// 	// 这里的 serviceId 需要在 getBLEDeviceServices 接口中获取
				// 	serviceId: this.serviceId, //store 直接提供
				// 	// 这里的 characteristicId 需要在 getBLEDeviceCharacteristics 接口中获取
				// 	characteristicId: this.characteristicId, //可获取也可提供
				// 	success: (res) => {
				// 	plus.nativeUI.toast('读取成功')
				// 	console.log('读取特定服务成功');
				// 	//启动订阅
				// 	// this.notifyValueChange()
				// 	},
				// 	fail:(err)=>{
				// 		plus.nativeUI.toast('读取失败：'+err.code)
				// 		console.log(err)
				// 	}
				// })
			},

			//模拟动画
			movie() {
				let tempH = this.RhandH;
				let tempW = this.RhandW;
				this.ballH = this.ballH + 20;
				this.ballW = this.ballW + 20;
				this.ballTop = this.ballTop - 1.5
				this.RboolZ = false;
				this.RhandH = this.RhandH - 5;
				this.RhandW = this.RhandW - 5;
				this.rightTithiss = this.rightTimes + 1;
				this.percent = this.percent + 2;
				setTimeout(() => {
					this.RhandH = tempH;
					this.RhandW = tempW;
				}, 1200)
				if (this.ballH > 180) {
					this.boolB = true;
					this.ballH = 80;
					this.ballW = 50;
					// clearInterval(this.Tid)
					clearInterval(this.timer)
				}
				this.count = 0;
				this.timer = setInterval(() => {
					this.count++;
					this.minutes = parseInt(this.count / 60);
					this.second = this.count % 60;
				}, 1000);
			},
			//被动模拟动画
			movieBD() {
				let tempH = this.RhandH;
				let tempW = this.RhandW;
				this.ballH = this.ballH + 5;
				this.ballW = this.ballW + 5;
				this.ballTop = this.ballTop - 0.4
				this.RboolZ = false;
				this.RhandH = this.RhandH - 5;
				this.RhandW = this.RhandW - 5;
				this.rightTithiss = this.rightTimes + 1;
				this.percent = this.percent + 2;
				setTimeout(() => {
					this.RhandH = tempH;
					this.RhandW = tempW;
				}, 1200)
				if (this.ballH >= 180) {
					this.boolB = true;
					this.ballH = 80;
					this.ballW = 50;
					// clearInterval(this.Tid)
					clearInterval(this.timer)
				}
				this.count = 0;
				this.timer = setInterval(() => {
					this.count++;
					this.minutes = parseInt(this.count / 60);
					this.second = this.count % 60;
				}, 1000);
			},

			// ArrayBuffer转16进度字符串示例
			ab2hex(buffer) {
				const hexArr = Array.prototype.map.call(
					new Uint8Array(buffer),
					function(bit) {
						return ('00' + bit.toString(16)).slice(-2)
					}
				)
				return hexArr.join('')
			},
			//字符串转转换二进制数据
			hexStringToArrayBuffer(str) {

				var buffer = new ArrayBuffer(str.length);
				let dataView = new DataView(buffer)
				let ind = 0;
				for (var i = 0, len = str.length; i < len; i += 2) {
					let code = parseInt(str.substr(i, 2), 16)
					dataView.setUint8(ind, code)
					ind++
				}
				return buffer;
			},
			setName() {
				this.data = uni.getStorageSync("accountInfo");

				if (this.data.name != "") {
					this.name = this.data.name;
				} else if (this.data.ipname != "") {
					this.name = this.data.ipname;
				} else {
					this.name = this.data.phone;
				}
			},
			resetData() {
				this.leftTimes = 0;
				this.rightTimes = 0;
				this.minutes = 0;
				this.second = 0;
				this.count = 0;
				this.percent = 0;
			},
			genID(length) {
				return Number(Math.random().toString().substr(3, length) + Date.now()).toString(36);
			},

			jump_score() {
				this.closeBluetoothAdapter();
				uni.navigateTo({
					url: '../trainScore/trainScore'
				})
			},
			closeBluetoothAdapter(OBJECT) {
				uni.closeBluetoothAdapter({
					success: res => {
						console.log('断开蓝牙模块成功');
						uni.showToast({
							title: "已断开蓝牙"
						})
						uni.setStorageSync("connectBlue", false);
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	/* @import url("isTraining.css"); */
	.content {
		display: flex;
		justify-content: flex-end;
		flex-direction: column;
		/* align-items: center; */
		width: 100%;
		height: 100%;
		/* padding: 20px; */
		background-color: #A4D8FF;
	}

	.ani-box {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100%;
		/* border: 1px solid #000000; */
	}

	.left {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 90%;
		/* border: 1px solid #000000; */
	}

	.left-top {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 18px;
	}
	
	.left-center {
		margin-top: -5%;
		.leftHands {
			font-size: 45px;
			color:#015EFE ;
            margin-left:10px;
		}
		.BD_end{
			display: flex;
		}
		.timeNum {
			font-size: 45px;
            // overflow: hidden;
			text-align: center;
			background-color: white;
			width: 45px;
			height: 55px;
			margin: 5px;
            line-height: 55px;
			border-radius: 10px;
			display: inline-block;
			z-index: 2;
		}
		.timeText {
			// display: inline-block;
			font-size: 45px;
		}
	}
	
	.left-bottom {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 15px;
	}

	.right {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 90%;
		/* border: 1px solid #000000; */
	}

	.right-top {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 18px;
	}

	.right-bottom {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		font-size: 18px;

		//
		.begin {
			padding: 20rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			color: #FFFFFF;
			background-color: #2C71FF;
			border-radius: 40rpx;
			font-size: 36rpx;
		}

		.BD_trainning {
			padding: 20rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			color: white;
			border-radius: 40rpx;
			font-size: 36rpx;
			background-color: #FF5D1D;
		}

		.BD_end {
			padding: 20rpx;
			padding-left: 30rpx;
			padding-right: 30rpx;
			color: #f40;
			background-color: #2C71FF;
			border-radius: 40rpx;
			font-size: 36rpx;
		}
	}

	.zero {
		padding: 10px;
		padding-left: 15px;
		padding-right: 15px;
		background-color: #CCE7FF;
		color: #FF5D1D;
		border-radius: 20px;
		margin-bottom: 20px;
	}

	.assess {
		padding: 10px;
		padding-left: 15px;
		padding-right: 15px;
		color: #0078FF;
		background-color: #CCE7FF;
		border-radius: 20px;
	}

	.center {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		height: 100%;
		width: 50%;
		/* height: 200px; */ 
		/* background-image: url(../../../static/icon/training/bgImg.png); */
		/* background-position: initial; */
		background-size: cover; 

		.center-bg {
			position: absolute;
			height: 100%;
			width: 50%;
			// z-index: 1;
			.img {
				height: 100%;
				width: 100%;
			}
		}

		.center-btn {
			// display: none;
			position: absolute;
			bottom: 20%;
			z-index: 2;
			background-color: red;
			color: white;
			width: 16%;
			height: 12%;
			line-height: 250%;
			font-size: 18px;
			border-radius: 35px;
			text-align: center;
		}

		.ball {
			position: absolute;
			top: 31%;

			.ball-img {
				transition: 1s;
			}
			
			
			
		}

		.hand-box {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 90%;
			bottom: 15%;

			.hand {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;

				/* width: 400px; */
				.hand-center {
					display: flex;
					justify-content: space-around;
					flex-direction: column;
					align-items: center;
					height: 100%;
					width: 100%;
					.handText {
						position: absolute;
						// top: 150px;
						// left: 200px;
						bottom: -3%;
						// left: 38%;
					}
					
					// .handText-red {
					// 	position: absolute;
					// 	// top: 145px;
					// 	// left: 160px;
					// 	bottom: -1%;
					// 	left: 43%;
					// }
					
					.end {
						margin-bottom: 20rpx;
						padding: 20rpx;
						padding-left: 30rpx;
						padding-right: 30rpx;
						color: #FFFFFF;
						background-color: #FF7327;
						border-radius: 40rpx;
						font-size: 36rpx;
					}

					.correct {
						margin-bottom: 20rpx;
						display: flex;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						font-size: 36rpx;
					}

					.begin {
						padding: 20rpx;
						padding-left: 30rpx;
						padding-right: 30rpx;
						color: #FFFFFF;
						background-color: #2C71FF;
						border-radius: 40rpx;
						font-size: 36rpx;
					}

					.BD_trainning {
						padding: 20rpx;
						padding-left: 30rpx;
						padding-right: 30rpx;
						color: #f40;
						background-color: #2C71FF;
						border-radius: 40rpx;
						font-size: 36rpx;
						background-color: #FF5D1D;
					}

					.BD_end {
						padding: 20rpx;
						padding-left: 30rpx;
						padding-right: 30rpx;
						color: #f40;
						background-color: #2C71FF;
						border-radius: 40rpx;
						font-size: 36rpx;
					}
				}
			}


		}
	}

	.hand-box {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		width: 350px;
	}

	.hand {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		/* width: 400px; */
	}

	.hand-center {
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;
	}

	.begin {
		padding: 10px;
		padding-left: 15px;
		padding-right: 15px;
		color: #FFFFFF;
		background-color: #2C71FF;
		border-radius: 20px;
		font-size: 18px;
	}

	.correct {
		margin-bottom: 10px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 18px;
	}

	.end {
		margin-bottom: 10px;
		padding: 10px;
		padding-left: 15px;
		padding-right: 15px;
		color: #FFFFFF;
		background-color: #FF7327;
		border-radius: 20px;
		font-size: 18px;
	}

	.times {
		font-size: 18px;
		position: absolute;
		top: 80%;
		left: 45%;
	}
	.shanFlageRight{
		animation: flash 0.09s infinite;
	}
	.shanFlageLeft{
		animation: flash 0.125s infinite;
	}
	@keyframes flash {
		   0% {opacity: 0;}
		        100% {opacity: 1;}
	}
</style>
